﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/CustomerAdmin/Customer.Master" CodeBehind="ChooseGroupsMails.aspx.cs" Inherits="OnlineBusinesses.Areas.CustomerAdmin.MailBox.ChooseGroupsMails" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ContentCustomerAdmin">

    <script type="text/javascript">
        $(document).ready(function () {

            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'AccountName' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                url: "ChooseGroupsMails.aspx/Search",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 50,
                    username: "jqwidgets"
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );
            $("#jqxlistbox").jqxListBox(
            {
                checkboxes: true,
                width: $("#jqxlistbox").width() + 1,
                height: 300,
                source: dataAdapter,
                selectedIndex: 0,
                displayMember: "name",
                valueMember: "countryName",
                renderer: function (index, label, value) {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = "<div class='col-md-12 col-xs-12' style='padding:0px;height:60px;width:700px'>" +
                                        "<div class='col-md-1 col-xs-1' style='padding:0px;padding-right:5px;'>" +
                                            "<img src='http://placehold.it/50x50/' style='padding:5px;'/>" +
                                        "</div>" +
                                        "<div class='col-md-4 col-xs-4' style='padding:5px;border-right:1px solid #ddd;'>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Họ tên : " + item.AccountName +
                                            "</div>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Chức vụ : " + item.adminName1 +
                                            "</div>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Phái : Nam" +
                                            "</div>" +
                                        "</div>" +

                                        "<div class='col-md-4 col-xs-4' style='padding:5px 10px;border-right:1px solid #ddd;'>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Điện thoại : 0934059899" +
                                            "</div>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Sinh ngày : 10/05/1988" +
                                            "</div>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Ngày tham gia : dd/mm/yyyy " +
                                            "</div>" +
                                        "</div>" +

                                        "<div class='col-md-3 col-xs-3' style='padding:5px 10px;'>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;'>" +
                                                "Đã tham gia nhóm :" +
                                            "</div>" +
                                            "<div class='col-md-12 col-xs-12' style='padding:0px;height:34px;overflow:hidden;'>" +
                                                "<div>IT Network</div><div>IT Network 2</div>" +
                                            "</div>" +
                                        "</div>" +

                                    "</div>";
                        return label;
                    }
                    return "";

                }
            });
            var me = this;
            $("#searchField").on('keyup', function (event) {
                if (me.timer) clearTimeout(me.timer);
                me.timer = setTimeout(function () {
                    dataAdapter.dataBind();
                }, 300);
            });
            $('.noEnterSubmit').keypress(function (e) {
                if (e.which == 13) return false;
            });
        });
    </script>
    <div id='jqxWidget' class="col-md-12 col-xs-12" style="height:440px;padding:0px;font-size: 13px; font-family: Verdana; float: left;padding-left:10px;padding-top:10px;">
        <h3 style="font-weight:bold;">Nhóm Web-Design</h3>
        <div class="col-md-12" style="padding:10px 0px;">
            <div class="col-md-3" style="padding:0px;">
              <h4>Tìm kiếm người dùng : </h4>
            </div>
            <div class="col-md-6" style="padding:0px;">
              <input class='input_add noEnterSubmit' placeholder="Tên người dùng" id='searchField' style="padding:10px;height:50px;" type="text" /> 
            </div>
            <div class="col-md-3" style="padding:0px;">
              
            </div>
        </div>
        <div class="col-md-12" style="padding:0px;padding-top:20px;" >
            <div class="col-md-9" style="padding:0px;" id="jqxlistbox">

            </div>
            <div class="col-md-3" style="padding:0px;">

            </div>
        </div>
        <div class="col-md-9" style="padding: 10px 0px;text-align:right;">
                <button class="btn btn-default" style="border-radius:0px;background:#d00;color:#fff;">Xác nhận</button>
        </div>
    </div>
</asp:Content>